import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:wallpaper/components/placeholder/avatar.dart';
import 'package:wallpaper/pages/navbar/child/setting_page.dart';
import 'package:wallpaper/pages/other/local/AlbumListPage.dart';
import 'package:wallpaper/pages/other/local/local_video.dart';
import 'package:wallpaper/pages/other/love/love_page.dart';
import 'package:wallpaper/pages/other/love/love_video.dart';
import 'package:wallpaper/providers/setting_provider.dart';
import 'package:wallpaper/themes/theme_provider.dart';
import 'package:wallpaper/tools/route_animation.dart';

class HomeDrawer extends StatelessWidget {
  HomeDrawer({super.key});

  // 定义菜单组数据
  final List<MenuGroup> menuGroups = [
    MenuGroup(
      title: '收藏',
      items: [
        MenuItem(
          title: '竖屏壁纸',
          icon: Icons.wallpaper,
          page: const LovePage(axis: 'vertical'),
        ),
        MenuItem(
          title: '横屏壁纸',
          icon: Icons.landscape,
          page: const LovePage(axis: 'horizontal'),
        ),
        MenuItem(
          title: '竖屏视频',
          icon: Icons.stay_current_portrait,
          page: const LoveVideo(axis: 'vertical'),
        ),
        MenuItem(
          title: '横屏视频',
          icon: Icons.stay_current_landscape,
          page: const LoveVideo(axis: 'horizontal'),
        ),
      ],
    ),
    MenuGroup(
      title: '本地',
      items: [
        MenuItem(
          title: '本地相册',
          icon: Icons.photo_library,
          page: const AlbumListPage(),
        ),
        MenuItem(
          title: '本地视频',
          icon: Icons.video_library,
          page: const LocalVideo(),
        ),
      ],
    ),
    MenuGroup(
      title: '主题',
      items: [
        MenuItem(
          title: '暗黑模式',
          icon: Icons.brightness_6,
          isThemeSwitch: true,
        ),
      ],
    ),
    MenuGroup(
      title: '系统',
      items: [
        MenuItem(
          title: '设置中心',
          icon: Icons.settings,
          page: const SettingPage(),
        ),
        MenuItem(
          title: '退出',
          icon: Icons.logout,
        ),
      ],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    final themes = Theme.of(context);
    final textTheme = themes.textTheme;
    final theme = themes.colorScheme;

    return Drawer(
      elevation: 16,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.horizontal(right: Radius.circular(0)),
      ),
      backgroundColor: theme.primaryContainer.withOpacity(0.75),
      width: 250,
      shadowColor: theme.surface,
      child: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 顶部用户信息区域
            Container(
              padding: EdgeInsets.only(top: 24),
              width: double.infinity,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Avatar(size: 72, isRound: true),
                  const SizedBox(height: 16),
                  Text(
                    '波奇壁纸',
                    style: textTheme.titleLarge
                        ?.copyWith(fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    '欢迎使用',
                    style: textTheme.bodyMedium?.copyWith(),
                  ),
                ],
              ),
            ),

            // 内容区域
            Expanded(
              child: SingleChildScrollView(
                padding: const EdgeInsets.symmetric(vertical: 12),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 动态生成菜单组
                    for (var group in menuGroups)
                      buildMenuGroup(context, group: group),
                    const SizedBox(height: 50),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 构建菜单组
  Widget buildMenuGroup(BuildContext context, {required MenuGroup group}) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.only(left: 8.0, right: 8.0),
          child: Divider(
            height: 1,
            thickness: 1,
            color: Colors.grey.withOpacity(0.3),
          ),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(12, 5, 24, 5),
          child: Row(
            children: [
              Text(
                group.title,
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),
        // 动态生成菜单项
        for (var item in group.items)
          item.isThemeSwitch
              ? buildChangeTheme(context, item: item)
              : buildMenuItem(context, item: item),
      ],
    );
  }

  // 构建菜单项
  Widget buildMenuItem(BuildContext context, {required MenuItem item}) {
    final colorScheme = Theme.of(context).colorScheme;

    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: () {
          if (item.page != null) {
            RouteAnimation().animateRoute(context, item.page!);
          } else {
            Provider.of<SettingProvider>(context, listen: false)
                .toggleWelcomePage(false);
          }
        },
        borderRadius: BorderRadius.circular(12),
        splashColor: colorScheme.primary.withOpacity(0.1),
        highlightColor: colorScheme.primary.withOpacity(0.05),
        child: Container(
          height: 48,
          margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
          padding: const EdgeInsets.symmetric(horizontal: 12),
          child: Row(
            children: [
              Icon(
                item.icon,
                size: 20,
                color: colorScheme.onSurface,
              ),
              const SizedBox(width: 16),
              Text(
                item.title,
                style: TextStyle(
                  fontSize: 15,
                  color: colorScheme.onSurface,
                ),
              ),
              const Spacer(),
              Icon(
                Icons.chevron_right,
                color: colorScheme.onSurface.withOpacity(0.5),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 构建主题切换项
  Widget buildChangeTheme(BuildContext context, {required MenuItem item}) {
    final colorScheme = Theme.of(context).colorScheme;
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: () {
          Provider.of<ThemeProvider>(context, listen: false).toggleTheme();
        },
        borderRadius: BorderRadius.circular(12),
        splashColor: colorScheme.primary.withOpacity(0.1),
        highlightColor: colorScheme.primary.withOpacity(0.05),
        child: Container(
          height: 48,
          margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
          padding: const EdgeInsets.symmetric(horizontal: 12),
          child: Row(
            children: [
              Icon(
                item.icon,
                size: 20,
                color: colorScheme.onSurface,
              ),
              const SizedBox(width: 16),
              Text(
                Provider.of<ThemeProvider>(context, listen: false).isDarkMode
                    ? '浅色模式'
                    : item.title,
                style: TextStyle(
                  fontSize: 15,
                  color: colorScheme.onSurface,
                ),
              ),
              const Spacer(),
            ],
          ),
        ),
      ),
    );
  }

  // 统一的导航方法
  void navigateTo(BuildContext context, Widget page) {
    Navigator.pop(context); // 关闭抽屉
    RouteAnimation().animateRoute(context, page);
  }
}

// 菜单组模型
class MenuGroup {
  final String title;
  final List<MenuItem> items;

  const MenuGroup({
    required this.title,
    required this.items,
  });
}

// 菜单项模型
class MenuItem {
  final String title;
  final IconData icon;
  final Widget? page;
  final bool isThemeSwitch;

  const MenuItem({
    required this.title,
    required this.icon,
    this.page,
    this.isThemeSwitch = false,
  });
}
